// script.js 文件内容

// 用于localStorage中存储任务列表的键名常量
const TASKS_STORAGE_KEY = 'TASKS_STORAGE_KEY';

// 表示单个任务的类，包含任务描述和状态等属性
class Task {
  constructor(description) {
    this.description = description;
    this.completed = false;
  }
}

// 从本地存储加载任务列表并显示到页面上的函数
function loadTasks() {
  const tasksJSON = localStorage.getItem(TASKS_STORAGE_KEY);
  return tasksJSON ? JSON.parse(tasksJSON) : [];
}

// 将当前任务列表保存到本地存储中的函数
function saveTasks(tasks) {
  localStorage.setItem(TASKS_STORAGE_KEY, JSON.stringify(tasks));
}

// 负责将任务列表渲染到页面上的函数
function renderTasks(tasks) {
  const taskListElement = document.getElementById('task-list');
  // 清空现有的任务列表
  taskListElement.innerHTML = '';

  // 逐个添加任务到列表中
  tasks.forEach(task => {
    const taskItemElement = document.createElement('div');
    taskItemElement.className = 'task-item';
    taskItemElement.textContent = task.description;
    taskListElement.appendChild(taskItemElement);
  });
}

// 用户调用此函数来添加新任务到任务列表和本地存储中
function addTask(description) {
  const tasks = loadTasks();
  const newTask = new Task(description);
  tasks.push(newTask);
  saveTasks(tasks);
  renderTasks(tasks);
}

// 初始化应用的函数，负责绑定事件监听器和加载存储的任务列表
function init() {
  const addTaskBtn = document.getElementById('add-task-btn');
  const taskInput = document.getElementById('task-input');

  // 绑定点击按钮时添加任务的事件
  addTaskBtn.addEventListener('click', () => {
    const description = taskInput.value.trim();
    if (description) {
      addTask(description);
      taskInput.value = ''; // 清空输入框
    }
  });

  // 加载并渲染本地存储中的任务列表
  renderTasks(loadTasks());
}

// 页面加载完成后初始化应用
window.addEventListener('DOMContentLoaded', init);
